<template>
<div class="wrap">
    <el-container>
        <div class="wraps">
            <el-header>
                <HeaderName></HeaderName>
            </el-header>
            <el-container>
                <el-aside style="width:auto;">
                    <div class="asideTitle" @click="onIsCollapse">
                        <div v-if="isCollapse">
                            <img class="iconsImg" src="../../public/img/向右箭头.png" alt="">
                        </div>
                        <div v-else>
                            收起
                        </div>
                    </div>
                    <el-menu 
                        default-active="1-4-1" 
                        class="el-menu-vertical-demo" 
                        @open="handleOpen" 
                        @close="handleClose" 
                        :collapse="isCollapse"
                    > 
        <!-- home -->
                        <el-submenu index="1" :class="{submenu:!isCollapse}">
                            <template slot="title">
                                <i class="el-icon-user-solid"></i>
                                <span slot="title">用户管理</span>
                            </template>
                            <router-link :to="{name:'users'}" tag="div" >
                                <el-menu-item index="1-1">用户列表</el-menu-item>
                            </router-link>
                        </el-submenu>
        <!-- goods -->
                        <el-submenu index="2" :class="{submenu:!isCollapse}">
                            <template slot="title">
                                <i class="el-icon-key"></i>
                                <span slot="title">权限管理</span>
                            </template>
                            <router-link :to="{name:'roles'}" tag="div" >
                                <el-menu-item index="2-1">角色列表</el-menu-item>
                            </router-link>
                            <router-link :to="{name:'rights'}" tag="div">
                                <el-menu-item index="2-2">权限列表</el-menu-item>
                            </router-link>
                        </el-submenu>
        <!-- order -->
                        <el-submenu index="3" :class="{submenu:!isCollapse}">
                            <template slot="title">
                                <i class="el-icon-shopping-bag-2"></i>
                                <span slot="title">商品管理</span>
                            </template>
                            <router-link :to="{name:'goodss'}" tag="div">
                                <el-menu-item index="3-1">商品列表</el-menu-item>
                            </router-link>
                            <router-link :to="{name:'params'}" tag="div">
                                <el-menu-item index="3-2">分类参数</el-menu-item>
                            </router-link>
                            <router-link :to="{name:'categories'}" tag="div">
                                <el-menu-item index="3-3">商品分类</el-menu-item>
                            </router-link>
                        </el-submenu>
                        <el-submenu index="4" :class="{submenu:!isCollapse}">
                            <template slot="title">
                                <i class="el-icon-s-order"></i>
                                <span slot="title">订单管理</span>
                            </template>
                            <router-link :to="{name:'orders'}" tag="div">
                                <el-menu-item index="4-1">订单列表</el-menu-item>
                            </router-link>
                        </el-submenu>
                        <el-submenu index="5" :class="{submenu:!isCollapse}">
                            <template slot="title">
                                <i class="el-icon-data-analysis"></i>
                                <span slot="title">数据统计</span>
                            </template>
                            <router-link :to="{name:'datas'}" tag="div">
                                <el-menu-item index="5-1">数据报表</el-menu-item>
                            </router-link>
                        </el-submenu>
                    </el-menu>   
                </el-aside>
                <el-main>
                    <div class="mianbao"></div>
                    <router-view></router-view>
                </el-main>
            </el-container>    
        </div>
    </el-container>
</div>
</template>
<script>
    import { mapState } from 'vuex';
    import HeaderName from './HeaderName.vue';
    export default {
        name: "HomeName",
        components: { HeaderName },
        computed: {
            ...mapState("navigation", ["isCollapse"])
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            onIsCollapse() {
                console.log(!this.isCollapse);
                this.$store.commit("navigation/CHANGE", !this.isCollapse);
            }
        }
    }
</script>
  
<style scoped>
    *{margin: 0;padding:0;}
    .wraps{
        width: 100vw;
        max-height: 100vh;
        overflow: hidden;
    }
    .mianbao{
        width: 100%;
        height: 50px;
        background: red;
        float: left;
    }
    .tianjia{
        max-width: 200px;
    }
    .box-card{
        border-top: none;
    }
    .el-container{
        height: 100vh;
    }
    .el-header, .el-footer {
        background-color: #fff;
        color: #333;
        line-height: 60px;
        border-bottom: 2px solid #ddd;
    }
    .el-aside {
        color: #333;
        line-height: 100%;
        height: 100vh;
    }
    .el-main {
        background-color: #fff;
        color: #333;
        overflow: hidden;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .submenu{width: 200px;}
    .imgs{
        width: 15px;
        height: 15px;
        margin: 0 2px;
    }
    .asideTitle{
        width: 100%;
        height: 40px;
        background: rgb(70, 70, 255);
        color: #fff;
        line-height: 40px;
        text-align: center;
        border-radius: 5px;
        margin: 4px 0; 
    }
    .iconsImg{
        width: 15px;
        height: 15px;
    }
</style>
  